<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>租房</title>
		<!-- 小图显示在浏览器的标签上 -->
		<link rel="shortcut icon" type="image/ico" href="https://www.jzhfz.com/favicon.ico" >
		<script src="../js/jquery-1.12.4.js"></script>
		<script src="../layui/layui.js"></script>
		<link rel="stylesheet" type="text/css" href="../layui/css/layui.css"/>
		<link rel="stylesheet" type="text/css" href="../css/floatmuen.css"/>
		<link rel="stylesheet" type="text/css" href="../css/pub_head.css"/>
		<link rel="stylesheet" type="text/css" href="../css/pub_footer.css"/>
		<link rel="stylesheet" href="../css/navigation.css">
		<link rel="stylesheet" href="../css/selhouse.css">
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=kwKWiw65Q3LdHE6ZIIGyU3DTGSRoYF5G"></script>
	</head>
	<body>
		<ul id="floatMul"></ul>
		<div id="head"></div>
		<div id="navigation"></div>
		<div id="newHouseMain">
			<div>&nbsp;</div>
			<span class="layui-breadcrumb currentPage" lay-separator="&gt" style="visibility: visible;">
				<span>您的位置</span><span lay-separator="">&gt;</span>
			  <a href="">荆州好房子网</a><span lay-separator="">&gt;</span>
			  <a href="">荆州租房</a>
			</span>
			<div id="newHouseNav">
				<div>
					<ul class="newHouseNavSum newHouseNav_area">
						<li>区域：</li>
						<li><span class="newHouseNav_d newHouseNav_red">不限</span></li>
						<li th:each="a:${arealist}"><span class="newHouseNav_d" th:value="${a.id}" th:text="${a.name}"></span></li>
					</ul>
					<ul class="newHouseNavSum newHouseNav_area2">
					</ul>
				</div>

				<div>
					<ul class="newHouseNavSum newHouseNav_houseType">
						<li style="margin-right: -4px;">建筑类型：</li>
						<li><span class="newHouseNav_d newHouseNav_red">不限</span></li>
						<li th:each="h:${housetypelist}"><span class="newHouseNav_d" th:value="${h.id}" th:text="${h.name}"></span></li>
					</ul>
				</div>

				<div>
					<ul class="newHouseNavSum newHouseNav_price">
						<li>价格：</li>
						<li><span class="newHouseNav_d newHouseNav_red">不限</span></li>
						<li><span class="newHouseNav_d" min="30" max="-1">30万以下</span></li>
						<li><span class="newHouseNav_d" min="30" max="50">30-50万</span></li>
						<li><span class="newHouseNav_d" min="50" max="70">50-70</span></li>
						<li><span class="newHouseNav_d" min="70" max="100">70-100万</span></li>
						<li><span class="newHouseNav_d" min="100" max="130">100-130万</span></li>
						<li><span class="newHouseNav_d" min="130" max="160">130-160万</span></li>
						<li><span class="newHouseNav_d" min="160" max="200">160-200万</span></li>
						<li><span class="newHouseNav_d" min="200" max="300">200-300万</span></li>
						<li><span class="newHouseNav_d" min="300" max="500">300-500万</span></li>
						<li><span class="newHouseNav_d" min="-1" max="500">500万以上</span></li>
					</ul>
				</div>

				<div>
					<ul class="newHouseNavSum newHouseNav_mj">
						<li>面积：</li>
						<li><span class="newHouseNav_d newHouseNav_red">不限</span></li>
						<li><span class="newHouseNav_d" min="50" max="-1">50m²以下</span></li>
						<li><span class="newHouseNav_d" min="50" max="70">50-70m²</span></li>
						<li><span class="newHouseNav_d" min="70" max="90">70-90m²</span></li>
						<li><span class="newHouseNav_d" min="90" max="110">90-110m²</span></li>
						<li><span class="newHouseNav_d" min="110" max="150">110-150m²</span></li>
						<li><span class="newHouseNav_d" min="150" max="200">150-200m²</span></li>
						<li><span class="newHouseNav_d" min="200" max="250">200-250m²</span></li>
						<li><span class="newHouseNav_d" min="250" max="300">250-300m²</span></li>
						<li><span class="newHouseNav_d" min="-1" max="300">300m²以上</span></li>
					</ul>
				</div>

				<div>
					<ul class="newHouseNavSum newHouseNav_hx">
						<li>类型：</li>
						<li><span class="newHouseNav_d newHouseNav_red" value="">不限</span></li>
						<li><span class="newHouseNav_d" value="1">1</span></li>
						<li><span class="newHouseNav_d" value="2">2</span></li>
						<li><span class="newHouseNav_d" value="3">3</span></li>
						<li><span class="newHouseNav_d" value="4">4</span></li>
						<li><span class="newHouseNav_d" value="5">5</span></li>
					</ul>
				</div>

				<div>
					<ul class="newHouseNavSum newHouseNav_renovation">
						<li>装修：</li>
						<li><span class="newHouseNav_d newHouseNav_red">不限</span></li>
						<li th:each="r:${renovationList}"><span class="newHouseNav_d" th:value="${r.id}" th:text="${r.name}"></span></li>
					</ul>
				</div>
			</div>

			<div id="newHouseNavZhu">
				<div class="newHousesAll">
					<div class="newHousesAll_d1">
						<span>全部楼盘</span>
						<span>
							<span class="layui-icon layui-icon-location"></span>
							地图
						</span>
					</div>
					<div class="newHousesAll_d2">
						<div>
							荆州好房子网为你找到<span id="newHousesAll_d2_housecount" th:text="${countPage}"></span>个符合条件的楼盘
						</div>
						<div>
							<span class="houseSort newHouseNav_red">默认排序</span>
							<span class="houseSort">价格<span class="layui-icon layui-icon-triangle-d"></span></span>
						</div>
					</div>
					<div class="newHousesAll_d3">
						<ul id="newHousesAll_d3_ul">
							<li class="newHousesAll_d3_li" th:each="s:${selllist}" onmouseenter="dMap(this)">
								<div class="layui-row grid-demo">
									<div class="layui-col-md8 newHousesAll_d3_li_d1">
										<div class="newHousesAll_d3_li_d1_d1">
											<img class="newHousesAll_d3_li_img" src="../images/selhouse/1.jpg" />
										</div>
										<div class="newHousesAll_d3_li_d1_d2">
											<h1 class="newHousesAll_d3_li_d1_d2_h1" th:text="${s.house.title}"></h1>
											<p><span th:text="${s.house.houseType.name}"></span>&nbsp;|&nbsp;建面约 <span th:text="${s.house.houseSize}"></span>㎡</p>
											<p><span th:text="${s.house.area.name}"></span>&nbsp;|&nbsp;152条点评</p>
											<p><span th:each="l:${s.house.list}" th:text="${l.label.name}">品牌地产</span></p>
										</div>
									</div>
									<div class="layui-col-md4 text_center newHousesAll_d3_li_d2">
										<div class="newHousesAll_d3_li_d2_d1">总价<span th:text="${s.house.price==null?'待定':s.house.price}"></span>万</div>
										<div class="newHousesAll_d3_li_d2_d2"><span th:text="${s.house.price==null?'待定':s.house.price*10000/s.house.houseSize}"></span> 元/m²</div>
										<div class="newHousesAll_d3_li_d2_d3">
											<img src="../images/selhouse/2.jfif" />
											<span>A保利堂悦* 张柳清</span>
											<span class="house_ZX">向他咨询</span>
										</div>
										<div class="newHousesAll_d3_li_d2_d4">
											<span class="layui-icon layui-icon-service"></span> 400-600-0716 转 505
										</div>
									</div>
									<div class="layui-col-md12 newHousesAll_d3_li_d3">
										<span class="layui-icon layui-icon-speaker " style="color: #6BD9D9;"></span>&nbsp;&nbsp;<span>均价8700元/m² 沙市二中旁 约85-166㎡交付在即 限量毛坯7XXX元/㎡起，精装8XXX元/㎡起</span>
									</div>
								</div>
							</li>
						</ul>
					</div>
					<div id="housefy" style="text-align: center;" th:value="${countPage}"></div>
				</div>
				<div class="newHouseMap">
					<div class="newHouseMap_d1">
						<div style="width:310px;height:400px;border:#ccc solid 1px;font-size:12px" id="map"></div>
						<img src="../images/selhouse/new_listrt.jpg" />
						<div style="border: 1px solid #D9D9D9;padding-top: 10px">
							<table class="newHouseMap_table">
								<tr>
									<td>姓名：</td>
									<td><input placeholder="请输入姓名" /></td>
								</tr>
								<tr>
									<td>手机：</td>
									<td><input placeholder="请输入手机号" /></td>
								</tr>
								<tr>
									<td colspan="2"><span class="layui-btn layui-btn-normal newHouseMap_table_baom">立即报名</span></td>
								</tr>
								<tr>
									<td colspan="2">免费看房电话：<span style="color: #FF5B6A;">400-600-0716</span></td>
								</tr>
							</table>
						</div>
					</div>
				</div>
			</div>



		</div>
		
		<div id="footer"></div>
		<script th:inline="javascript">
			var indexSouTextv = /*[[${name}]]*/ "";
			var houseTypeIdv = -1;
			var areaIdv = -1;
			var areaIdvz = -1;
			var priceMinv = -1;
			var priceMaxv = -1;
			var mjMinv = -1;
			var mjMaxv = -1;
			var hxv = -1;
			var renovationIdv = -1;
			var pagel = {
				elem: 'housefy'
				,count: $("#housefy").attr("value")
				,limit: 6
				,curr: 1
				,first: '首页'
				,last: '尾页'
				,jump: function(obj,first){
					if(!first){
						fyajax(obj.curr,obj.limit);
					}
				}
			};
			$(function(){
				$("#floatMul").load("../publichtml/floatMune.html");
				$("#head").load("../publichtml/public_pageHead.html");
				$("#footer").load("../publichtml/pub_footer.html");$("#navigation").load("../publichtml/navigation.html",function(){
					$("#nologo>li").removeClass("active").eq(3).addClass("active");
				});
			});
			$(".newHouseNav_area .newHouseNav_d").click(function(){
				if($(this).text()=='不限'){
					$(".newHouseNav_area2").hide();
				}else{
					$(".newHouseNav_area2").show();
				}
				$(".newHouseNav_area .newHouseNav_d").removeClass("newHouseNav_red");
				$(this).addClass("newHouseNav_red");
				var li='';
				$.ajax({
					url:"/selhouse/findAllByPid",
					data:{id:$(this).attr("value")},
					type: "get",
					async: false,
					success:function(data){
						$.each(data,function (i,d){
							li+="<li><span class='newHouseNav_d' onclick='d(this)' value='"+d.id+"'>"+d.name+"</span><li>"
						});
					}
				});
				if (li != ''){
					$(".newHouseNav_area2").html(li);
				}else{
					$(".newHouseNav_area2").empty();
				}
				areaIdv = $(this).attr("value");
				areaIdvz = -1;
				fyajax(1,6);
			});
			$(".newHouseNav_price .newHouseNav_d").click(function(){
				$(".newHouseNav_price .newHouseNav_d").removeClass("newHouseNav_red");
				$(this).addClass("newHouseNav_red");
				priceMinv = $(this).attr("min");
				priceMaxv = $(this).attr("max");
				fyajax(1,6);
			});
			$(".newHouseNav_mj .newHouseNav_d").click(function(){
				$(".newHouseNav_mj .newHouseNav_d").removeClass("newHouseNav_red");
				$(this).addClass("newHouseNav_red");
				mjMinv = $(this).attr("min");
				mjMaxv = $(this).attr("max");
				fyajax(1,6);
			});

			$(".newHouseNav_hx .newHouseNav_d").click(function(){
				$(".newHouseNav_hx .newHouseNav_d").removeClass("newHouseNav_red");
				$(this).addClass("newHouseNav_red");
				hxv = $(this).attr("value");
				fyajax(1,6);
			});
			$(".newHouseNav_houseType .newHouseNav_d").click(function(){
				$(".newHouseNav_houseType .newHouseNav_d").removeClass("newHouseNav_red");
				$(this).addClass("newHouseNav_red");
				houseTypeIdv = $(this).attr("value");
				fyajax(1,6);
			});
			$(".newHouseNav_renovation .newHouseNav_d").click(function(){
				$(".newHouseNav_renovation .newHouseNav_d").removeClass("newHouseNav_red");
				$(this).addClass("newHouseNav_red");
				renovationIdv = $(this).attr("value");
				fyajax(1,6);
			});
			function d(t){
				$(".newHouseNav_area2 .newHouseNav_d").removeClass("newHouseNav_red");
				$(t).addClass("newHouseNav_red");
				areaIdvz = $(t).attr("value");
				fyajax(1,6);
			};
			layui.use(['laypage', 'layer'], function(){
				var laypage = layui.laypage
						,layer = layui.layer;

				laypage.render(pagel);
			});
			//ajax查询数据
			function fyajax(curr,limit){
				map.clearOverlays();//清空标记点
				var count;
				$.ajax({
					url:'/selhouse/oldpages',
					data:{
						type:3,
						name:indexSouTextv,
						index:curr,
						size:limit,
						areaId:areaIdv,
						priceMin:priceMinv,
						priceMax:priceMaxv,
						houseTypeId:houseTypeIdv,
						areaIdz:areaIdvz,
						mjMin:mjMinv,
						mjMax:mjMaxv,
						hx:hxv,
						renovationId:renovationIdv
					},
					type:"post",
					async:false,
					success:function(data){
						console.log(data);
						var count=data.count;
						pagel.count = count;
						//更新分页按钮显示
						layui.use(['laypage', 'layer'], function(){
							var laypage = layui.laypage
									,layer = layui.layer;
							laypage.render(pagel);
						});
						$("#newHousesAll_d2_housecount").text(count);
						if (count==0){$("#newHousesAll_d3_ul").empty();return;}
						var li='';
						$.each(data.list,function (i,d1){
							var d = d1.house;
							var spanC='';
							$.each(d.list,function (i,d){
								spanC+="<span>"+d.label.name+"</span>";
							})
							li+="<li class='newHousesAll_d3_li' onmouseenter='dMap(this)'>" +
									"<div class='layui-row grid-demo'>" +
									"<div class='layui-col-md8 newHousesAll_d3_li_d1'>" +
									"<div class='newHousesAll_d3_li_d1_d1'>" +
									"<img class='newHousesAll_d3_li_img' src='../images/selhouse/1.jpg' />" +
									"</div>" +
									"<div class='newHousesAll_d3_li_d1_d2'>" +
									"<h1 class='newHousesAll_d3_li_d1_d2_h1'>"+d.title+"</h1>" +
									"<p><span>"+d.houseType.name+"</span>&nbsp;|&nbsp;建面约 <span>"+d.houseSize+"</span>㎡</p>" +
									"<p><span>"+d.area.name+"</span>&nbsp;|&nbsp;152条点评</p>" +
									"<p><span>"+spanC+"</p>"+
									"</div>" +
									"</div>" +
									"<div class='layui-col-md4 text_center newHousesAll_d3_li_d2'>" +
									"<div class='newHousesAll_d3_li_d2_d1'>总价<span>"+(d.price==null?'待定':d.price)+"</span>万</div>" +
									"<div class='newHousesAll_d3_li_d2_d2'>参考总价:<span>"+(d.price==null?'待定':d.price*10000/d.houseSize)+"</span> 万/套</div>" +
									"<div class='newHousesAll_d3_li_d2_d3'>" +
									"<img src='../images/selhouse/2.jfif' />" +
									"<span>A保利堂悦* 张柳清</span>" +
									"<span class=\"house_ZX\">向他咨询</span>" +
									"</div>" +
									"<div class=\"newHousesAll_d3_li_d2_d4\">" +
									"<span class=\"layui-icon layui-icon-service\"></span> 400-600-0716 转 505" +
									"</div>" +
									"</div>" +
									"<div class=\"layui-col-md12 newHousesAll_d3_li_d3\">" +
									"<span class=\"layui-icon layui-icon-speaker \" style=\"color: #6BD9D9;\"></span>&nbsp;&nbsp;<span>均价8700元/m² 沙市二中旁 约85-166㎡交付在即 限量毛坯7XXX元/㎡起，精装8XXX元/㎡起</span>" +
									"</div>" +
									"</div>" +
									"</li>";
						});
						$("#newHousesAll_d3_ul").html(li);
						ajaxMarkers();
						tjMarkers(markers.length);
					}
				});
				return count;
			}

		</script>
		<script type="text/javascript">
			$(document).ready(function() {
				$(window).scroll(function() {
					if ($(document).scrollTop() < 443) {
						$(".newHouseMap_d1").css("position", "relative");
						$(".newHouseMap_d1").css("top", "0px");
					}

					if ($(document).scrollTop() >= 443) {
						$(".newHouseMap_d1").css("position", "fixed");
						$(".newHouseMap_d1").css("top", "120px");
					}

				});
			});
			var markers = [];//地图标记位置
			function ajaxMarkers(){
				$.ajax({
					url:"/selhouse/getMap2",
					type:"get",
					async:false,
					success:function(data){
						markers = data;
					}
				});
			}
			ajaxMarkers();
			function tjMarkers(lh){
				console.log(1);
				map.centerAndZoom(new BMap.Point(markers[0].lng,markers[0].lat),16);
				for(var index = 0; index < lh; index++ ){
					var point = new BMap.Point(markers[index].lng,markers[index].lat);//设置标签位置
					var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{
							imageOffset: new BMap.Size(0,-21)
						})});
					var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(35,5)});
					var opts = {
						width: 20,
						title: markers[index].house.title,
						enableMessage: true
					};
					var infoWindow = new BMap.InfoWindow(markers[index].house.describe,opts);
					addClickHandler(marker,infoWindow);
					map.addOverlay(marker);
				};
			}
			//创建和初始化地图函数：
			function initMap(){
				createMap();//创建地图
				setMapEvent();//设置地图事件
				addMapControl();//向地图添加控件
				addMapOverlay();//向地图添加覆盖物
			}
			function createMap(){
				map = new BMap.Map("map");
			}
			function setMapEvent(){
				map.enableScrollWheelZoom();
				map.enableKeyboard();
				map.enableDragging();
				map.enableDoubleClickZoom()
			}
			function addClickHandler(target,window){
				target.addEventListener("click",function(){
					target.openInfoWindow(window);
				});
			}
			//向地图添加控件
			function addMapControl(){

			}
			function addMapOverlay(){
				tjMarkers(markers.length);
			}
			var map;
			initMap();
			function dMap(t){
				var allOverlay = map.getOverlays();
				var index = $(t).index();
				map.centerAndZoom(new BMap.Point(markers[index].lng,markers[index].lat),14);

				for (var i=0;i < allOverlay.length;i++){
					if(allOverlay[i].z.point == null || allOverlay[i].z.yj.imageOffset.width == -46){
						map.removeOverlay(allOverlay[i]);
					}
				}

				var point = new BMap.Point(markers[index].lng,markers[index].lat);//设置标签位置
				var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{
						imageOffset: new BMap.Size(-46,-21)
					})});
				var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(35,5)});
				var opts = {
					width: 20,
					title: markers[index].house.title,
					enableMessage: true
				};
				var infoWindow = new BMap.InfoWindow(markers[index].house.describe,opts);
				//marker.setLabel(label);
				addClickHandler(marker,infoWindow);
				map.addOverlay(marker);
			}
		</script>
	</body>
</html>
